<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()
const quit = () => {
    window.localStorage.removeItem('token')
}
</script>

<template>
    <div class="header">
        <div class="back" @click="router.push('/')">
            <van-icon name="arrow-left" />
        </div>
        <div class="title">账户</div>
        <div class="home" @click="router.push('/')">首页</div>
    </div>
    <div class="content">
        <div class="pic">
            <img src="../assets/images/tx-default.png" alt="">
        </div>
        <div class="right">
            <p>手机用户</p>
        </div>
    </div>
    <div class="space"></div>
    <div class="bookshelf" @click="router.push('/bookshelf')">
        <div class="name">我的书架</div>
        <div class="icon">
            <van-icon name="arrow" />
        </div>
    </div>
    <div class="space"></div>
    <div class="quit">
        <div class="quit-btn" @click="router.push('/'), quit();">退出登录</div>
    </div>
</template>
<style scoped lang="scss">
.header {
    display: flex;
    width: 375rem;
    height: 44rem;
    background-color: #E64D2E;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    font-size: 18rem;

    .back {
        font-size: 22rem;
        margin-left: 15rem;
    }

    .home {
        font-size: 14rem;
        padding-right: 15rem;
    }
}

.content {
    width: 345rem;
    height: 70rem;
    padding: 15rem;
    display: flex;

    .pic {
        width: 70rem;
        height: 70rem;
        margin-right: 15rem;

        img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }
    }

    .right {
        width: 260rem;
        height: 24rem;
        margin-top: 6rem;
        margin-bottom: 8rem;
        color: #626358;
        font-size: 17rem;
        font-weight: bold;
    }
}

.space {
    width: 375rem;
    height: 10rem;
    background-color: rgb(245, 245, 245);
}

.bookshelf {
    width: 345rem;
    height: 55rem;
    padding-right: 15rem;
    margin-left: 15rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16rem;
    color: #6c6358;
}

.quit {
    width: 345rem;
    height: 90rem;
    padding: 20rem 15rem 25rem 15rem;
    text-align: center;

    .download {
        width: 343rem;
        height: 38rem;
        border: 1rem solid #ed6460;
        color: #ed6460;
        border-radius: 5rem;
        font-size: 16rem;
        line-height: 38rem;

    }

    .quit-btn {
        margin-top: 10rem;
        width: 345rem;
        height: 40rem;
        line-height: 40rem;
        font-size: 16rem;
        color: #545454;
        background-color: #f5f5f5;
        border-radius: 5rem;
    }
}
</style>